<template>
  <div>
    <van-collapse v-model="active" :accordion="true">
      <van-collapse-item name="1">
        <template #title>
          <div class="aui-ftn12 text-3">
            当淘宝下单价大于发布价时，可申请向商家追回差额!
          </div>
        </template>
        <div class="aui-ftn12 aui-padded-10">
          1、补差金额范围在0.1---50元内，差价超过50元不可使用此功能。
          <br />
          <br />
          2、补差理由和图片尽量填写清晰，方便商家快速了解，参与补差。
          3、任务过程中，若发现商家故意设置高额补差，降低平台任务本金，从而达到降低佣金的行为，可联系客服举报。
          <br />
          <br />
          4、当发起补差申请后，若商家在此任务确认收货状态时依旧没有完成补差，可主动联系客服解决
          <br />
          <br />
          5、收到商家向某订单发起的补差申请，请及时核对并处理，订单补差未处理之前，资金处于保护状态，无法正常提现
        </div>
      </van-collapse-item>
    </van-collapse>

    

    <div v-if="finished && items.length == 0" v-cloak>
      <div class="no-data aui-text-center aui-text-9">
        <i class="iconfont icon-lujing1161"></i>
        <div class="aui-ftn16">
          空空如也~
        </div>
      </div>
    </div>
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :disabled="disabled"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="text"
        @load="onLoad"
      >
      <div class="fall">
      <template v-for="(item, index) in items">
        <div class="aui-padded-10 item aui-bg-f">
          <div class="aui-padded-b-10 aui-text-3 aui-ftn13 fall-list">
            <van-row class="aui-padded-t-10">
              <van-col span="6" class="aui-text-center">
                <img
                  :src="item.image"
                  alt=""
                  @click="
                    utils.fnPreviewPic([item.image])
                  "
                />
              </van-col>
              <van-col span="18" class="aui-text-7 aui-padded-l-5">
                <div class="aui-ftn12 aui-padded-b-5 fall-list-top">
                  <div>
                    <span class="aui-text-7 aui-padded-r-5">试用ID：</span>
                    <span class="aui-text-3" v-text="item.order_id"></span>
                  </div>
                  <span class="aui-text-red aui-padded-l-5" v-text="item.statusname"></span>
                </div>
                <div class="aui-ftn12 aui-padded-b-5">
                  <span class="aui-text-7 aui-padded-r-5">订单号:</span>
                  <span class="aui-text-3 aui-padded-r-5" v-text="item.ordernum"></span>
                  <Copy :name="item.ordernum" target="ordernum"></Copy>
                </div>
                <div class="aui-ftn12 aui-padded-b-5">
                  <span class="aui-text-7 aui-padded-r-5">差价金额:</span>
                  <span class="aui-text-3">￥{{item.money}}</span>
                </div>
                <div class="aui-ftn12 aui-padded-b-5">
                  <span class="aui-text-7 aui-padded-r-5">更新时间:</span>
                  <span class="aui-text-3"  v-text="item.updatetime"></span>
                </div>
              </van-col>
            </van-row>
            <div class="aui-ftn12 aui-margin-t-10 tag" v-if="item.remark">
              <span class="aui-text-7 aui-padded-r-5">申请原因:</span>
              <span class="aui-text-3" v-text="item.remark"></span>
            </div>
            <div class="aui-ftn12 aui-text-red tag  aui-margin-t-10" v-if="item.reason">
              <span class="aui-padded-r-5">拒绝理由:</span>
              <span v-text="item.reason"></span>
            </div>
            <div class="aui-text-right aui-padded-t-5" v-if="item.status == `1` && item.uid1 == 0">
              <van-button
                plain
                size="small"
                type="default"
                class="aui-margin-r-10"
                @click="fnUpdate(item.id, 3)"
                >拒绝</van-button
              >
              <van-button plain size="small" type="warning" @click="fnUpdate(item.id, 2)">同意</van-button>
            </div>
          </div>
        </div>
        <div class="hr"></div>
      </template>
      </div>
      </van-list>
    </van-pull-refresh>
    <van-dialog
      v-model="fall.show"
      title="填写拒绝理由"
      @confirm="fnConfirm"
      show-cancel-button
    >
      <div class="check aui-padded-15">
        <input
          type="text"
          v-model="fall.reason"
          placeholder="请输入"
          class="aui-text-center aui-ftn14 aui-text-3"
        />
      </div>
    </van-dialog>
  </div>
</template>

<script>
import User from "../../service/user.js";
import Header from "../components/header.vue";
import Copy from "@/views/components/copy.vue";
export default {
  components: {
    Copy,
    Header
  },
  data() {
    return {
      items: [],
      loading: false,
      finished: false,
      refreshing: false,
      pageNo: 0,
      text: "",
      disabled: false,
      is_loading: false,
      active: ["1"],
      fall: {
        show: false, 
        reason: ''
      }
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      this.disabled = this.utils.handleScroll();
    },
    onLoad() {
      if (this.loading && !this.finished && !this.is_loading) {
        this.is_loading = true;
        this.pageNo++;
        User.fnGetFall({
          uid: this.$store.state.uid,
          p: this.pageNo,
          n: 10,
          isToken: true,
          isLoading: true,
        }).then((res) => {
          this.is_loading = false;
          // 加载状态结束
          this.loading = false;
          if (res && res.status) {
            this.items = this.items.concat(res.data);
          } else {
            this.finished = true;
            if (this.items.length > 0) this.text = "没有更多了";
          }
        });
      }
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.pageNo = 0;
      this.text = "";
      this.refreshing = false;
      this.items = [];
      this.onLoad();
    },
    fnUpdate (id, status) {
      this.fall = {
        id,
        status,
        show: false,
        reason: ''
      }
      this.$dialog.confirm({
          title: '提示',
          message: `确认${status == 3 ? `拒绝` : `同意`}通过该申请?`,
        })
        .then(() => {
          status == 2 ? this.update(id, status, '') : this.fall.show = true;
        })
    },
    fnConfirm () {
      const {id, status, reason} = this.fall;
      this.update(id, status, reason);
    },
    update (id, status, reason) {
      User.updateFall({
        uid: this.$store.state.uid,
        id: id,
        status: status,
        reason: reason,
        isToken: true,
        isLoading: true,
      }).then(res => {
        if (res) {
          this.utils.fnMsg(res.msg);
          if (res.status) this.onRefresh()
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.fall {
  .fall-list {
    img {
      width: 80px;
      height: 80px;
    }
    .fall-list-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .tag {
      padding: 5px;
      background-color: #fafafa;
      border-radius: 3px;
    }
  }
}
div.check input {
  border: 1px solid #eee;
  border-radius: 3px;
  height: 40px;
  line-height: 40px;
  width: 100%;
  margin: auto;
}
</style>
